<script setup lang="ts">
import { ref } from 'vue'
import SlideVerify, { type SlideVerifyInstance } from 'vue3-slide-verify'
import 'vue3-slide-verify/dist/style.css'

const emit = defineEmits(['success'])
const msg = ref('')
const block = ref<SlideVerifyInstance>()
const text = '向右滑动>>'
const accuracy = 1

const onAgain = () => {
  msg.value = '检测到非人为操作的哦！ 请重试'
  block.value?.refresh()
}

const onSuccess = (times: number) => {
  msg.value = `登录成功，耗时 ${(times / 1000).toFixed(1)} 秒`
  emit('success') // 向父组件发送消息
  // 刷新
  block.value?.refresh()
  msg.value = ''
}

const onFail = () => {
  msg.value = '验证不通过'
}

const onRefresh = () => {
  console.log('点击了刷新小图标')
}
</script>

<template>
  <div class="slide_box">
    <slide-verify
      class="slide_box"
      ref="block"
      :interval="10"
      :slider-text="text"
      :accuracy="accuracy"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <p class="notice">{{ msg }}</p>
  </div>
</template>

<style scoped>
.slide_box {
  margin: 0 auto;
}
</style>
